<template>
  <div class="user">
    <div class="user-style-body">
      <el-table
        :data="userDate"
        style="width: 100%"
        height="120px"
        stripe
        :header-cell-style="{background:'#1C7CD5',color:'#fff'}"
      >
        <el-table-column
          prop="name"
          label="姓名"
          width="70" height="20">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          width="70" height="20">
          <template slot-scope="scope">
            <span v-if="scope.row.role==1">技工</span>
            <span v-if="scope.row.role==2">安全员</span>
            <span v-if="scope.row.role==3">监理</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cardNo"
          label="工号"
          width="160">
        </el-table-column>
        <el-table-column
          prop="gender"
          width="60"
          label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.gender==0">女</span>
            <span v-if="scope.row.gender==1">男</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="生日"
          width="110">
          <template slot-scope="scope">
            {{scope.row.birthday | timestampToDate}}
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="130">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.state==2" style="color:red;">定位关闭</span>
            <span v-if="scope.row.state==1" style="color:#42b983;">定位开启</span>
            <span v-if="scope.row.state==3" style="color:#555;">已删除</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="success" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#1c7cd5;width: 36px;height:20px;font-size: 12px;padding: 0" @click="editUser(scope.$index, scope.row)">编辑</el-button>
              <el-button type="info" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#F33718;width: 36px;height:20px;font-size: 12px;padding: 0;margin: -1px" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="user-add">
      <div style="width: 100px">
        <el-button size="mini" style="color:#1c7cd5;width: 100px;height: 24px;padding: 4px 3px" icon="el-icon-plus" @click="useradd">新增用户</el-button>
      </div>
    </div>
    <div class="user-info-form" :style="userInfoStyle">
        <el-form class="apply-form first-form" :model="userInfo" :rules="rules" ref="userInfo">
          <input type="hidden" v-model="userInfo.id">
          <el-form-item label="姓名:" prop="name">
          <el-input v-model="userInfo.name" size="mini" placeholder="请填写姓名"></el-input>
          </el-form-item>

          <el-form-item label="角色:" prop="role">
          <el-select v-model="userInfo.role" size="mini" style="width: 180px;" placeholder="请选择角色">
            <el-option :value="1" label="技工"></el-option>
            <el-option :value="2" label="安全员"></el-option>
            <el-option :value="3" label="监理"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="性别:" prop="gender">
          <el-select v-model="userInfo.gender" size="mini" style="width: 180px;" placeholder="请选择性别">
            <el-option :value="1" label="男"></el-option>
            <el-option :value="0" label="女"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="身份证号码:" prop="cardNo">
          <el-input v-model="userInfo.cardNo" size="mini" placeholder="请填写身份证号码"></el-input>
          </el-form-item>

          <el-form-item label="联系电话:" prop="cardNo">
          <el-input v-model="userInfo.phone" size="mini" placeholder="请填写联系电话"></el-input>
          </el-form-item>

          <el-form-item label="出生日期:" prop="birthday">
          <el-date-picker
            v-model="userInfo.birthday"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 180px"
            size="mini"
            placeholder="请选择出生日期">
          </el-date-picker>
          </el-form-item>

          <el-form-item label="状态:" prop="state">
          <el-select v-model="userInfo.state" size="mini" style="width: 180px;" placeholder="请选择状态">
            <el-option :value="1" label="开启定位"></el-option>
            <el-option :value="2" label="关闭定位"></el-option>
            <el-option :value="3" label="已删除"></el-option>
          </el-select>
          </el-form-item>

          <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
            <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background:rgba(244,244,244,1);border:1px solid rgba(187,187,187,1);" @click="userFormCancle">取消</el-button>
            <el-button :class="addButton" style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="userFormPost('userInfo')">新增</el-button>
            <el-button :class="saveButton" style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="saveFormPost('userInfo')">保存</el-button>
          </el-row>
        </el-form>
    </div>
  </div>

</template>

<script>
export default {
  inject:['reload'],
  name: "User",
  data(){
    return {
      addButton: 'hiddenButton',
      saveButton: 'hiddenButton',
      userDate:[],
      userInfo:{
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1
      },
      rules:{
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        cardNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
        ],
        role:[
          { required: true, message: '请选择角色', trigger: 'change' },
        ],
        gender:[
          { required: true, message: '请选择性别', trigger: 'change' },
        ],
        phone:[
          { required: true, message: '请输入联系电话', trigger: 'blur' },
        ],
        state:[
          { required: true, message: '请选择状态', trigger: 'change' },
        ]
      },
      userInfoStyle: 'display:none',
    }
  },
  mounted() {
    let __this = this
    this.axios.get("person/listPerson ").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        __this.userDate = result.result
      }
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods:{
    useradd(){
      if(this.saveButton == 'showButton'){
        this.saveButton = 'hiddenButton'
        this.userInfoReset()
      }
      this.userInfoStyle= "display:block;"
      this.addButton = 'showButton'
      this.userInfo.state = 1
      this.userInfo.gender = 1
      this.userInfo.role = 1
      this.userInfo.birthday = new Date("1971-01-01")
    },
    saveFormPost(userInfo){
      this.$refs.userInfo.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("person/editPerson", formData, config).then((res)=>{
            console.log(res.data.result);
            //this.reload()
            if(res.data.code == '200'){
              this.$message({
                message: '修改数据成功！',
                type: 'success',
                offset:'300'
              });
              this.userInfoReset()
            }
          })
        }else{
          this.$message({
                message: '数据验证失败',
                type: 'warring',
                offset:'300'
              });
        }
      })
    },
    userFormPost(userInfo){
      this.$refs.userInfo.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("person/savePerson", formData, config).then((res)=>{
            console.log(res.data.result);
            //this.reload()
            if(res.data.code == '200'){
              this.$message({
                message: '添加数据成功！',
                type: 'success',
                offset:'300'
              });
              this.userInfoReset()
              this.userDate.unshift(res.data.result)
            }
          })
        }else{
          this.$message({
                message: '数据验证失败',
                type: 'warring',
                offset:'300'
              });
        }
      })
    },
    userInfoReset(){
      this.userInfo={
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1
      }
    },
    userFormCancle(){
      this.userInfoReset()
      this.userInfoStyle="display:none"
      this.addButton = 'hiddenButton'
      this.saveButton = 'hiddenButton'
    },
    editUser(index,row){
      if(this.addButton == 'showButton'){
        this.addButton = 'hiddenButton'
      }
      console.log(row.id)
      this.saveButton = 'showButton'
      this.userInfoStyle="display:block;"
      this.userInfo = JSON.parse(JSON.stringify(row))
      this.userInfo.birthday= new Date (row.birthday);//时间
    },
    deleteUser(index,row){
      this.userInfoStyle="display:none;"
      this.axios.get("person/deleteById?id="+row.id).then(function (response) {
        let result = response.data
        if(result.code=='200'){
          this.$message({
            message: '删除数据成功！',
            type: 'success',
            offset:'300'
          });
        }
      }).catch(function (error) {
        console.log(error)
      })
      this.userDate.splice(index,1)
    },
  },
  filters:{
    timestampToDate (cjsj,time=false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate() +1 < 10 ? '0'+(date.getDate() +1) : date.getDate() +1) + ' '
      if(time) {
        var h = (date.getHours() +1 < 10 ? '0'+(date.getHours() +1) : date.getHours() +1) + ':'
        var m = (date.getMinutes() +1 < 10 ? '0'+(date.getMinutes() +1) : date.getMinutes() +1) + ':'
        var s = (date.getSeconds() +1 < 10 ? '0'+(date.getSeconds() +1) : date.getSeconds() +1)
        return Y+M+D+h+m+s
      }else{
        return Y+M+D
      }
    },
  }
}
</script>

<style scoped>
.user .user-style-body{
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  border-radius: 0.2rem;
  z-index: 999;
  height: 120px;
  background-color: #fff;
  width: 860px;
  padding: 2px;
}

.user .user-style-body .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.user-style-body .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
}

.user-style-body .el-table__row td{
  background-color: rgba(233,243,252,1);
}
.user-style-body .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246,251,255,1);
}
.user-style-body .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #d3faef;
  color: #118b9c;
}

.user-style-body table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.user-style-body table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.user-style-body table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.user-style-body table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/*修改滚动条样式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #1C7CD5;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}
.user-add{
  position: absolute;
  left: 770px;
  top: 84px;
  z-index: 9999;
}
.user-info-form{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 415px;
}

.user-info-for .el-input__inner{
  border-radius: 1px
}
.user-info-for .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.user-info-for .el-input__prefix{
  left: 145px;
}
.el-form-item__content{
  line-height: 20px;
  font-size: 12px;
}
.el-form-item__label{
  line-height: 22px;
  font-size: 12px;
}
.el-form-item {
    margin-bottom: 2px;
}
.showButton{
  display: block;
}
.hiddenButton{
  display: none;
}
.el-table{
  font-family: "Microsoft YaHei" ! important;
  font-size: 10px;
  font-weight: 500;
  color: #000;
}
.el-table td, .el-table th{
  padding: 3px 0;
}
.el-table-column--selection .cell{
  padding-left: 10px;
}
</style>
